.notification-container{
    width: 43px;
    height: 43px;
    top: 7px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 25px;
    color: #aaa;
    position: relative;
    &:focus{
        color: #aaa !important;
    }
    &.active {
        background: #eee;
        border-radius: 5px;
        color: #4c84ff;
    }
    .notification-badge {
        border: 2px solid orange;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        display: inline-block;
        position: absolute;
        top: 3px;
        right: 3px;
    }
    cursor: pointer;
    &:hover i{
        color: #4c84ff;
    }
    @media(max-width: 400px) {
        width: 40px;
        height: 40px;
        top: 5px;
    }
}

.notification-list-wrapper {
    position: fixed;
    top: 4.46em;
    right: 0;
    width: 300px;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0px 8px 9px -10px #949191 inset;
    z-index: 2;
    transform: translateX(100%);
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(.25,.8,.25,1);
    transition-property: transform;
    &.active {
        transform: translateX(0);
    }
    .notification-header {
        margin-bottom: 15px;
        padding: 15px 15px 5px;
        border-bottom: 1px solid #eee;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .no-content {
        text-align: center;
        font-size: 18px;
        padding-top: 15px;
        margin: 70px 15px 15px;
        border: 1px dashed #ddd;
        border-radius: 3px;
        i {
            font-size: 30px;
            color: orange;
            margin-bottom: 10px;
            display: inline-block;
        }
    }
    .search-btn {
        background: #f1f1f1;
        border: 0;
        outline: none;
        border-radius: 50%;
        padding: 3px 4px;
        cursor: pointer;
        position: relative;
        bottom: 3px;
        &:hover{
            background: #ddd;
        }
        &.close-search-bar{
            position: absolute;
            right: 5px;
            top: 4px;
            background: transparent;
        }
    }
    .search-input {
        position: absolute;
        right: 5px;
        left: 5px;
        top: 7px;
        input[type=text] {
            border-color: #eaeaea !important;
            border-radius: 0px;
        }
    }
}

.notification-list{
    position: absolute;
    top: 50px;
    bottom: 0px;
    ul{
        padding: 15px;
        li {
            list-style: none;
            display: flex;
            .notification-icon {
                font-size: 23px;
                width: 60x;
                text-align: center;
                i{
                    &.icon-comment {
                        color: orange;
                    }
                    &.icon-call_made {
                        color: green;
                    }
                    &.icon-call_missed {
                        color: red;
                    }
                    &.icon-mail_outline {
                        color: #4c84ff;
                    }
                    &.icon-error {
                        color: #e2a700;
                    }
                    &.icon-add_circle {
                        color: cornflowerblue;
                    }
                    &.icon-remove_circle {
                        color: orangered;
                    }
                }
            }
            .notification-content {
                display: inline-block;
                padding-left: 10px;
                .notification-message{
                    font-size: 14px;
                    margin-bottom: 3px;
                    padding-top: 3px;
                }
                .notification-type {
                    color: #aaa;
                    font-size: 12px;
                    display: inline-block;
                }
            }
        }
    }
}
.notification-overlay{
    position: fixed;
    top: 4.45em;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.3s linear,opacity 0.3s linear;
    &.active {
        opacity: 1;
        visibility: visible;
    }
}



@media (max-width: 992px) {
    .notification-list-wrapper {
        top: 7.28em;
    }
    .notification-overlay{
        top: 7.28em;
    }
}
@media (max-width: 767.98px) {
    .notification-list-wrapper {
        top: 4.46em;
    }
    .notification-overlay{
        top: 4.45em;
    }
}
@media (max-width: 400px) {
    .notification-list-wrapper {
        top: 4.2em;
    }
    .notification-overlay{
        top: 4.2em;
    }
}

::ng-deep body[dir="rtl"] {
    .notification-list-wrapper {
        right: auto;
        left: 0px;
        transform: translateX(-100%);
        direction: rtl !important;

        .search-btn {
            &.close-search-bar{
                right: auto !important;
                left: 5px;
            }
        }
    }
    .notification-list{
        ul{
            li {
                .notification-content {
                    padding-left: 0px;
                    padding-right: 15px;
                }
            }
        }
    }
}